﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="/ViewV5/CSS/bootstrap3.3.5/css/bootstrap.css" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="/ViewV5/CSS/index.css?v=1">
    <link rel="stylesheet" type="text/css" href="/ViewV5/CSS/default.css">
    <link href="/ViewV5/JS/element/index.css" rel="stylesheet" />
    <style>
        #Loading {
            top: 50%;
            left: 50%;
            position: absolute;
            -webkit-transform: translateY(-50%) translateX(-50%);
            transform: translateY(-50%) translateX(-50%);
            z-index: 100;
        }

        @-webkit-keyframes ball-beat {
            50% {
                opacity: 0.2;
                -webkit-transform: scale(0.75);
                transform: scale(0.75);
            }

            100% {
                opacity: 1;
                -webkit-transform: scale(1);
                transform: scale(1);
            }
        }

        @keyframes ball-beat {
            50% {
                opacity: 0.2;
                -webkit-transform: scale(0.75);
                transform: scale(0.75);
            }

            100% {
                opacity: 1;
                -webkit-transform: scale(1);
                transform: scale(1);
            }
        }

        .ball-beat > div {
            background-color: #279fcf;
            width: 15px;
            height: 15px;
            border-radius: 100% !important;
            margin: 2px;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
            display: inline-block;
            -webkit-animation: ball-beat 0.7s 0s infinite linear;
            animation: ball-beat 0.7s 0s infinite linear;
        }

            .ball-beat > div:nth-child(2n-1) {
                -webkit-animation-delay: 0.35s !important;
                animation-delay: 0.35s !important;
            }

        .el-input--mini .el-input__inner {
            border-radius: 0px !important;
        }

        .querydv {
            float: left;
            margin-left: 20px;
        }

            .querydv .qutitle {
                margin-bottom: 5px;
            }


        .el-checkbox {
            margin-right: 8PX !important;
        }
    </style>

</head>
<body>
    <form id="form1" runat="server">
        <div id="Loading">
            <div class="loader-inner ball-beat">
                <div></div>
                <div></div>
                <div></div>
            </div>
        </div>

        <div class="container-fluid maindiv margin10" id="PAGEVIEW">



            <!--<el-input placeholder="输入关键字查询" v-model="filterText"  style="margin-top:10PX"    size="mini" clearable >
    </el-input>
    <el-tree class="filter-tree"
             show-checkbox
             :data="treedata"
             :props="defaultProps"
             :filter-node-method="filterNode"
             @check-change="handleCheckChange"
             ref="tree">
    </el-tree>-->
            <!--<el-upload class="upload-demo"
               :action="action"
               :on-preview="handlePreview"
               :on-remove="handleRemove"
               multiple
               :limit="3"
               :on-success="handleSuncess"
               :file-list="fileList">
    </el-upload>-->
            <el-upload class="upload-demo"
                       action="https://jsonplaceholder.typicode.com/posts/"
                       :on-change="handleChange"
                       :file-list="fileList">
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>





        </div>

    </form>
    <script src="/ViewV5/JS/vue.js"></script>
    <script type="text/javascript" src="/ViewV5/JS/jquery-1.11.2.min.js"></script>
    <script src="/ViewV5/JS/lodash.min.js"></script>
    <script src="/ViewV5/JS/layer/layer.js"></script>
    <!-- 引入组件库 -->
    <script src="/ViewV5/JS/element/element.js"></script>
    <script src="/ViewV5/JS/bijs.js?v=5"></script>

    <script>
        var app = new Vue({
            el: '#PAGEVIEW',
            data: {
                isxb: false,
                fileList:[],
                filterText: "",
                roledata: [],
                xbdata: [],
                defaultProps: {
                    children: 'children',
                    label: 'label'
                },
                treedata: [],
                action: "/api/File/UPFILE",
                tableData: [{
                    fileList: [],
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    fileList: [],
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1517 弄'
                }, {
                    fileList: [],

                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1519 弄'
                }]

            },
            created() {
                $('#Loading').remove();
                $('#PAGEVIEW').show();
                this.dataid = ComFunJS.getQueryString("id", "0");

            },
            methods: {
                filterNode(value, data) {
                    if (!value) return true;
                    return data.label.indexOf(value) !== -1;
                },
                handleCheckChange(data, checked, indeterminate) {
                    console.log(data, checked, indeterminate);
                },
                getuser() {
                    var seluser = this.$refs.tree.getCheckedNodes();
                    return _.filter(seluser, function (o) { return o.lev == '1' });
                },
                handleEdit(index, row) {
                    console.log(index, row);
                },
                handleDelete(index, row) {
                    console.log(index, row);
                },
                handleSuncess: function (response, file, fileList) {
                    debugger;
                    var c = col;
                    for (var i = 0; i < fileList.length; i++) {
                        if (fileList[i].response && fileList[i].response.Result) {
                            fileList[i].url = fileList[i].response.Result[0];
                            fileList[i].response = fileList[i].response.Result[0];
                        }
                    }
                    //this.childpro.fileList = fileList;
                    //this.pzoption.value = JSON.stringify(fileList);X`

                },
                handlePreview: function (file) {
                    var type = _.last(file.name.split("."));
                    if ($.inArray(type.toLowerCase(), ['doc', 'docx', 'ppt', 'pptx', 'pdf']) > -1) {
                        var url = ComFunJS.getCookie("fileapi") + ComFunJS.getCookie("qycode") + /document/ + file.response.split(',')[0];
                        if (!ComFunJS.getCookie("fileapi")) {
                            url = file.response.split(',')[0];
                        }
                        window.open(url)

                    }
                    else {
                        var url = ComFunJS.getCookie("fileapi") + ComFunJS.getCookie("qycode") + /document/ + file.response.split(',')[0];
                        if (!ComFunJS.getCookie("fileapi")) {
                            url = file.response.split(',')[0];
                        }
                        window.open(url)
                    }


                },
                handleChange(file, fileList) {
                    this.fileList = fileList.slice(-3);
                },
                handleRemove: function (file, fileList) {
                    this.childpro.fileList = fileList;
                    this.pzoption.value = JSON.stringify(fileList);
                },
                handleRemove(file, fileList) {
                    console.log(file, fileList);
                },
                handlePreview(file) {
                    console.log(file);
                },  
           
                inityb: function () {
                    //$.getJSONV2("ssjclist.aspx/initdata", { P1: "" }, function (resultData) {
                    //    if (!resultData.ErrorMsg) {

                    //    }
                    //})


                    //$.getJSON("/api/Bll/ExeAction?Action=FORMBI_GETSELUSERJSON", { P1: "1" },
                    //    function (result) {
                    //        if (result.ErrorMsg == "") {
                    //            app.roledata = result.Result;
                    //            app.xbdata = result.Result1;
                    //            app.treedata = JSON.parse(JSON.stringify(app.xbdata));

                    //        }
                    //    }
                    //);

                },
            },
            mounted: function () {
                var pro = this;
                pro.$nextTick(function () {
                    pro.inityb();
                })

            },
            watch: {
                filterText: { //深度监听，可监听到对象、数组的变化
                    handler(newV, oldV) {
                        this.$refs.tree.filter(newV);
                    },
                    deep: true
                },
                isxb: { //深度监听，可监听到对象、数组的变化
                    handler(newV, oldV) {
                        if (newV) {
                            app.treedata = [];
                            app.treedata = JSON.parse(JSON.stringify(app.xbdata));
                        } else {
                            app.treedata = [];
                            app.treedata = JSON.parse(JSON.stringify(app.roledata));

                        }
                    },
                    deep: true
                },

                //filterText(val) {
                //    this.$refs.tree.filter(val);
                //}
            }
        })


    </script>
</body>
</html>